<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九九乘法口诀表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            padding: 20px;
        }

        .multiplication-table {
            border-collapse: collapse;
            margin: 20px;
        }

        .multiplication-table td {
            padding: 10px 15px;
            text-align: center;
            border: 1px solid #ddd;
        }

        /* 奇数行样式 */
        .multiplication-table tr:nth-child(odd) {
            background-color: #f0e6ff; /* 浅紫色背景 */
            font-weight: bold;        /* 粗体文字 */
        }

        /* 表头样式 */
        .multiplication-table tr:first-child {
            background-color: #663399;
            color: white;
            font-weight: bold;
        }

        /* 第一列样式 */
        .multiplication-table td:first-child {
            background-color: #e6d5ff;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <table class="multiplication-table" id="multiplicationTable">
        <!-- 表格内容将由JavaScript动态生成 -->
    </table>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const table = document.getElementById('multiplicationTable');

            // 创建表头
            const headerRow = table.insertRow();
            headerRow.insertCell().textContent = '×';
            for (let i = 1; i <= 9; i++) {
                headerRow.insertCell().textContent = i;
            }

            // 创建乘法表内容
            for (let i = 1; i <= 9; i++) {
                const row = table.insertRow();
                row.insertCell().textContent = i; // 第一列显示被乘数

                for (let j = 1; j <= 9; j++) {
                    const cell = row.insertCell();
                    if (j < i) {
                        cell.textContent = ''; // 下三角区域留空
                    } else {
                        cell.textContent = `${i}×${j}=${i*j}`; // 显示乘法公式和结果
                    }
                }
            }
        });
    </script>
</body>
</html>